import React, {Component, useState, useEffect, useMemo, useReducer, useContext, useImperativeHandle} from 'react';
// import ReactDOM from 'react-dom';
// import logo from './logo.svg';
import './App.css';
import {UserInfoContext} from "./context";

// function Circle(props) {
//     return (
//         <div className="circle" onClick={props.onclick}>{props.value}</div>
//     )
// }
//
// class Container extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             arr: [1, 2, 3, 4, 5, 6],
//             boolen: true,
//         }

//     }
//
//     handleClick() {
//         console.log('点击触发了测试有没有触发类组件里面的方法')
//     }
//
//     render() {
//         return (
//             <div className="container">
//                 {
//                     this.state.arr.map((item, index) => {
//                         return (
//                             <Circle key={index} value={item} onclick={() => this.handleClick()}/>
//                         )
//                     })
//                 }
//
//             </div>
//         )
//     }
// }
//
// class App extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             arr: [1, 2, 3, 4,],
//         }
//         this.handleAdd = this.handleAdd.bind(this)
//     }
//
//     handleAdd() {
//         this.setState({
//             arr: [...this.state.arr, 1]
//         })
//     }
//
//     render() {
//         return (
//             <div>
//                 {
//                     this.state.arr.map((item, index) => {
//                         return (
//                             <Container key={index}/>
//                         )
//                     })
//                 }
//                 <div onClick={this.handleAdd}>我奶常山赵子龙</div>
//             </div>
//         )
//     }
// }
function CurrentComponent(props) {
    const [num, setNum] = useState(3);
    const [age, useAge] = useState(5);
    const [boolen, setBoolen] = useState(false);
    const {userInfo} = useContext(UserInfoContext);
    const initalValue = {
        count: 0,
    }
    const reducer = (state, action) => {
        switch (action.type) {
            case "increment":
                return {
                    count: state.count++,
                }
            case "decrement":
                return {
                    count: state.count--,
                }
            default:
                return new Error();
        }
    }
    const [state, dispatch] = useReducer(reducer, initalValue);
    const parentComponent = () => {
        setNum(num + 7);
        props.methods(num);
    }

    //用useImperativeHandle暴露一些外部ref能访问的属性
    useImperativeHandle(props.onRef, () => {
        return {
            func: func,
        };
    });

    const func = () => {
        console.log('调用子组件的方法');
    }

    const changeBoolen = () => {
        setBoolen(!boolen);
    }

    // useEffect使用说明没有带有第二个参数的时候相当于componentDidMounted , componentWillUpdated,componentWillUnmounted
    //  带有第二个参数的时候只在第二个参数发生改变的情况下才会调用
    //  第二个参数是个空数组的情况下相当于挂载和销毁两个生命周期函数
    useEffect(() => {
        console.log('当前的num', num);
    })
    const num3 = useMemo((a, b) => {
        return num + age;

    }, [num, age])

    return (
        <div>
            <p style={{height: '100px', width: '100px', background: '#f00',}} onClick={changeBoolen}>点击切换显示隐藏</p>
            {boolen ? <div>显示出来咯</div> : null}
            <p style={{display: boolen ? 'block' : 'none'}}>我是一只小猪猪</p>
            <p>订阅的数据源{num3}</p>
            <p>useContext{userInfo.name}</p>
            <p>useReducer的数据{state.count}</p>
            <p onClick={() => {
                dispatch({type: 'increment'})
            }}>增加数据</p>
            <p onClick={() => {
                dispatch({type: 'decrement'})
            }}>减少数据</p>
            <p onClick={parentComponent}>点击改变父组件的方法</p>
            {
                props.arr.map((item, index) => {
                    return (
                        <p key={index}>{item}</p>
                    )
                })
            }

        </div>
    )
}

function App() {
    const [num, setNum] = useState(0);
    const [arr, setArr] = useState([1, 2, 3, 4, 5, 6]);
    const [profile, setProfile] = useState([2, 2, 3, 4, 8, 10]);
    let childRef = React.createRef();

    const changeData = () => {
        setNum(num + 4);
        setArr(arr.map(item => item * 2));
    }

    const sonComponent = param => {
        setNum(num + param);
    };

    const handleOnClick = () => {
        childRef.current.func();
    }

    return (
        <div>
            <UserInfoContext.Provider value={{
                userInfo: {
                    name: '童年的纸飞机',
                }
            }}>
                <p>当前的数量{num}</p>
                <div onClick={changeData}>点击按钮
                </div>
                <div onClick={handleOnClick}>调用子组件的方法</div>
                {
                    arr.map((item, index) => {
                        return (
                            <p key={index}>{item}</p>
                        )
                    })
                }
                <CurrentComponent arr={profile} onRef={childRef} methods={sonComponent}/>
            </UserInfoContext.Provider>
        </div>
    )
}


export default App;



